<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#app{
				width: 500px;
				padding: 40px;
				border: 1px solid #ccc;
				border-radius: 20px;
				margin: 50px auto;
				.title{
					display: flex;
				}
				.commit {
					height: 400px;
					.item{
						display: flex;
						justify-content: space-between;
						border-bottom: 1px solid #eee;
						align-items: center;
					}
				}
				.bottom{
					display: flex;
					textarea{
						flex-grow: 1;
					}
					button{
						width: 50px;
					}
				}
			}
		</style>
	</head>
	<body>

		<div id="app">
			<h1>评论区</h1>
			<div class="title">
				<span>请选择文字颜色</span>
				<div class="group">
					<label v-for="item in colorList">
						<input type="radio" name="color" :value="item" v-model="color">
						<span :style="{backgroundColor:item}">{{item}}</span>
					</label>
				</div>
			</div>
			<div class="commit">
				<div class="item" v-for="(item,index) in commitList">
					<p :style="{color:item.color}">{{item.content}}</p>
					<span @click="onDelete(index)">X</span>
				</div>
			</div>
			<div class="bottom">
				<textarea  cols="30" rows="5" v-model="content"></textarea>
				<button @click="send">发布</button>
			</div>
		</div>

		<script src="../vue.js"></script>
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
		<script>
			new Vue({
				el: '#app',
				data: {
					colorList:['red','blue','green','yellow','pink'],
					color:'yellow',
					content:'',
					commitList:[
						{
							id:'1',
							content:'你好啊',
							color:'red'
						},
						{
							id:'2',
							content:'你好啊2222',
							color:'green'
						}
					]
				},
				methods: {
					// 数据驱动页面
					send(){
						if(this.content===''){
							return alert('请输入评论内容')
						}
						this.commitList.push({
							id:Math.random()+'',
							content:this.content,
							color:this.color
						})
						this.content = ''
					},
					onDelete(index){
						console.log(666,index);
						// this.commitList = this.commitList.filter(item=>item.id!=id)
						this.commitList.splice(index,1)
					}
				}
			})




			/*
			
			组件化  响应式  基础指令  路由 等等...
			
			devlment dev  product prod
			官网：https://cn.vuejs.org/
			vue3   vue2  Vue  
			
			Vue.js是一套构建用户界面的**渐进式**框架。
			Vue 采用**自底向上**增量开发的设计。
			Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。
			另一方面，当与单文件**组件**和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为
			复杂的单页应用程序提供驱动。(SPA单页面应用，所有的显示都在一个页面当中)
			angular  react  vue
			2013受 angular 启发 尤雨溪 开发出 seed同年12月 改名为vue版本号 0.6.0'
			2014年正式对外发布 版本0.8.0
			2015年   发布vue1.0.0  Evangelin (新世纪福音战士)
			2016年  发布vue2.0.0 Ghost in the Shell(攻壳机动队)
			
			2020年 发布vue3.0.0  One Piece (海贼王)
			//2 Object.defineProperty--以及  3 Proxy
			特点:
			①采用组件化模式,提高代码效率,且让代码更好维护
			②声明式渲染,让开发人员无需操作DOM,提高开发效率
			③单页面应用
			
			
			1.1
			如何使用 
			cdn模式  安装vue-cli脚手架模式
			--开发模式 生产模式
			
			1.1.1  声明式渲染
			Vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM的系统
			
			1.1.2 组件化应用构建
			组件系统是Vue的另一个重要概念（后续学习），因为它是一种抽象的允许我们使用**小型、
			独立**和通常**可复用**的“小积木”构建大型应用。几乎任意类型的应用界面都可以抽象为一个组件树。
			vue devtools工具安装
			
			1.2.3
			传统DOM与vue实现对比
			
			1.2.4指令 (Directives) 是带有 `v-` 前缀的特殊属性 attribute。指令 attribute 的值预期是
			单个 JavaScript 表达式**。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
				1.文本插值--用双大括号显示变量的值{{}}  ----v-once
			    2.显示文字 v-text
			    3.可以解析原始的  v-html 
				
				
				
			1.2.5 双向数据绑定指令 v-model 
			你可以用 `v-model` 指令在表单 `<input>`、`<textarea>` 及 `<select>` 元素上创建双向数据绑定。
			它会根据控件类型自动选取正确的方法来更新元素。
			v-model修饰符
			.lazy：默认情况下Vue的数据同步采用 input 事件，使用 .lazy 将其修改为失去焦点时触发(change)
			.number：自动将用户的输入值转为数值类型（如果能转的话）
			.trim：自动过滤用户输入的首尾空白字符
			
			
			1.2.6 ## 绑定属性 v-bind
				vue中当遇到变量，boolean类型或者number类型时，需要使用绑定属性
				<div :style="'background-color:'+color">{{msg}}</div>
				<div :style="{backgroundColor:color}">{{msg}}</div>
				<div :style="{backgroundColor:bool?'red':'green'}">{{msg}}</div>
			
			1.2.7 v-on  事件绑定
			<!-- 常规写法 --> 
			<button v-on:click="num++"></button> 
			<!-- 缩写 --> 
			<button @click="num++"></button>
			<!-- 事件处理函数调用：直接写函数名 --> 
			<button @click="say"></button> 
			参数与$event
			
			事件修饰符 
			- `.stop `    ***  阻止冒泡
			- `.prevent  `   *** 阻止默认事件
			- `.capture`   捕获模式
			- `.self`   * 点击自己时才触发
			- `.once`   *  只执行一次
			按键修饰符
			.enter
			.tab
			.delete (捕获“删除”和“退格”键)
			.esc
			.space
			.up
			.down
			.left
			.right
			
			1.2.8 循环指令 v-for
			数组更新检测
			变更方法：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
			非变更方法：例如 filter()、concat() 和 slice()
			由于js的一些限制，vue2.0不能检测数组和对象的一些变化，需要特殊处理。
			例如：vue不能检测以下情况数组的变动：
			1.对数组的某个下标直接赋值 arr[3] = "scss"
			2.对数组更改它的长度  arr.length =2
			vue不能检测对象中的具体值得变化：
			以上情况可以使用 $set来解决，
			
			1.2.9 判断指令 v-if  v-show
			思考：v-if系列与v-show的区别是什么？
			v-if：控制元素是否渲染
			v-show：控制元素是否显示（已经渲染，display:none;）
			
			
			1.2.3 MVVM MVC  MVP
			
			MVC
			Model：模型层，数据模型及其业务逻辑，是针对业务模型建立的数据结构，Model与View无关，而与业务有关。
			View：视图层，用于与用户实现交互的页面，通常实现数据的输入和输出功能。
			Controller：控制器，用于连接Model层和View层，完成Model层和View层的交互。还可以处理页面业务逻辑，
			它接收并处理来自用户的请求，并将Model返回给用户。
			
			MVP
			Model：模型层，用于数据存储以及业务逻辑。
			View：视图层，用于展示与用户实现交互的页面，通常实现数据的输入和输出功能。
			Presenter：表示器，用于连接M层、V层，完成Model层与View层的交互，还可以进行业务逻辑的处理。
			
			MVVM  M model 数据   V view 视图   VM ViewModel 虚拟DOM
			modelviewViewModel
			在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，
			而ViewModel就是定义了一个Observer观察者。 wacther
			******************
			ViewModel是连接View和Model的中间件。
			ViewModel能够观察到数据的变化，并对视图对应的内容进行更新。
			ViewModel能够监听到视图的变化，并能够通知数据发生变化。
			*********************
			
			
			vue数据响应式原理
			
			Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
			所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
			在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计
			算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少
			虚拟 DOM  ，是一个 js的dom对象，保存在内存中，可以添加 这个jsdom的属性或方法。
			特点：比操作真实dom的速度要快、性能更好。
			
			
			响应式简述
			所谓响应式(Reactive)，放在一个前端框架中，指的就是框架能够主动观察(Observe)状态数据的变化(即Vue中的data)，
			并收集所有依赖(Depend)该数据的监控(Watch)回调代码，在数据发生改动时，主动执行该监控回调以更新目标数据或者更新视图。
			相应地，在Vue版本2.6.14的源码中，存在以下三个主要的类来专门实现响应式：
			
			Observer: 观察者，主要的作用是结合observe辅助方法，通过javascript原生的defineProperty方法，为
			目标数据对象的每个属性添加一个getter和setter，以实现依赖的收集和数据的劫持。其中getter的目的主要是
			为了收集依赖，某处代码如果有引用该数据对应子属性，则会自动触发getter，此时即可以进行依赖的收集；
			而setter主要是为了实现数据的劫持，在该数据被修改时，相应的setter将会触发，此时将会通知相应的依赖项进行执行。
			
			Dep: 依赖，主要的作用是通过观察者模式，将所有持有对应数据依赖回调的监控对象(Watcher)给保存起来到一
			个数组中，当依赖数据发生改变时，通知对应的监控对象来执行相应的依赖回调。
			
			Watcher：监控者，持有依赖目标数据的监控回调。当对应的依赖数据发生变化时，将触发该watcher对应的依
			赖回调以实现响应式。
			
			
			
			*/
		</script>
	</body>
</html>